<template>
<h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片:</td>
      <td >
        <img :src="person.imgUrl" alt="" width="120px">
      </td>
    </tr>
    <tr>
      <td>姓名:</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄:</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友:</td>
      <td>
        <ul>
          <li v-for="i in person.friends">{{i}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="loadDate">点击加载</button>
</template>

<script setup>
import {ref} from "vue";

let person=ref(
    {
      img:'',
      name:'',
      age:'',
      friends:[]
    }
);
const loadDate=()=>{
  person.value=(
      {
        imgUrl:'imgs/fcq.jpg',
        name:'传奇',
        age:'30',
        friends:['积极','扣扣开发','加大']
      }
  );
}
</script>

<style scoped>

</style>